Õppige, kuidas rakendada React'i progresseeruvat täiustamist, et luua veebisaite, mis on ligipääsetavad, jõudluspõhised ja vastupidavad, isegi kui JavaScript on keelatud või esialgse laadimise ajal.
React'i progresseeruv täiustamine: JavaScript-valikuliste komponentide loomine
Tänapäeva veebiarenduse maastikul on JavaScripti raamistikud nagu React kõikjal levinud. Kuigi need pakuvad võimsaid tööriistu dünaamiliste ja interaktiivsete kasutajaliideste loomiseks, võib ainuüksi JavaScriptile tuginemine põhjustada probleeme ligipääsetavuse, jõudluse ja SEO-ga. Siin tulebki appi progresseeruv täiustamine (PT). Progresseeruv täiustamine on veebiarenduse strateegia, mis seab esikohale veebisaidi põhifunktsionaalsuse ja sisu kättesaadavuse kõigile kasutajatele, olenemata nende brauseri võimekusest või JavaScripti olemasolust. React'i progresseeruv täiustamine keskendub komponentide loomisele, mis toimivad ka ilma JavaScriptita, pakkudes baaskogemust, mida seejärel täiustatakse JavaScriptiga rikkalikuma interaktiivsuse saavutamiseks.
Mis on progresseeruv täiustamine?
Progresseeruv täiustamine ei ole uus kontseptsioon. See on filosoofia, mis soovitab veebisaite ehitada kihtidena, alustades tugevast HTML-i ja CSS-i vundamendist. See vundament tagab, et sisu on ligipääsetav kõigile, sealhulgas puuetega kasutajatele, madala ribalaiusega ühenduste kasutajatele või neile, kellel on JavaScript keelatud. JavaScript lisatakse seejärel täiustuseks, et pakkuda rikkalikumat ja interaktiivsemat kogemust. Mõelge sellele kui maja ehitamisele: alustate põhistruktuurist ja lisate seejärel uhkeid funktsioone.
Progresseeruva täiustamise põhiprintsiibid:
- Ligipääsetavus esikohal: Veenduge, et põhisisu ja funktsionaalsus oleksid ligipääsetavad kõigile kasutajatele, sealhulgas abitehnoloogiaid kasutavatele inimestele.
- Semantiline HTML: Kasutage HTML-elemente asjakohaselt, et edasi anda sisu struktuuri ja tähendust. See on ülioluline ligipääsetavuse ja SEO jaoks.
- Sujuv tagasiminek (Graceful Degradation): Kui JavaScript ebaõnnestub või pole saadaval, peaks veebisait olema endiselt kasutatav, kuigi vähendatud interaktiivsuse tasemega.
- Jõudluse optimeerimine: Minimeerige lehe esmaseks laadimiseks vajaliku JavaScripti hulka.
Miks on progresseeruv täiustamine Reactis oluline
React on vaikimisi JavaScripti-mahukas raamistik. Kui Reacti rakendus renderdatakse brauseris, nõuab see tavaliselt suure hulga JavaScripti allalaadimist, parsimist ja käivitamist. See võib põhjustada mitmeid probleeme:
- Aeglased esmased laadimisajad: Aeglaste ühendustega või vähem võimsate seadmetega kasutajad võivad kogeda märkimisväärset viivitust enne, kui veebisait interaktiivseks muutub.
- Ligipääsetavuse probleemid: Puuetega kasutajatel, kes tuginevad abitehnoloogiatele, võib olla raskusi sisule juurdepääsemisega, kui renderdamiseks on vaja JavaScripti.
- SEO väljakutsed: Otsingumootorite robotid ei pruugi suuta korralikult indekseerida sisu, mis sõltub suuresti JavaScriptist.
Progresseeruva täiustamise rakendamine Reactis lahendab need väljakutsed, pakkudes baaskogemust, mis on funktsionaalne ka ilma JavaScriptita. See mitte ainult ei paranda ligipääsetavust ja jõudlust, vaid parandab ka SEO-d, tagades, et otsingumootorid saavad sisu hõlpsalt roomata ja indekseerida.
React'i progresseeruva täiustamise tehnikad
Reactis on progresseeruva täiustamise rakendamiseks mitmeid tehnikaid:
1. Serveripoolne renderdamine (SSR)
Serveripoolne renderdamine (SSR) on tehnika, mille puhul Reacti komponendid renderdatakse serveris ja tulemuseks olev HTML saadetakse kliendile. See võimaldab brauseril sisu kohe kuvada, isegi enne JavaScripti allalaadimist ja käivitamist. SSR pakub mitmeid eeliseid:
- Parem esmane laadimisaeg: Brauser saab eelrenderdatud HTML-i, mis tagab kiirema esmase lehe laadimise.
- Täiustatud SEO: Otsingumootorite robotid saavad eelrenderdatud HTML-i hõlpsalt indekseerida.
- Parem ligipääsetavus: Puuetega kasutajad pääsevad sisule juurde isegi enne JavaScripti laadimist.
Raamistikud nagu Next.js ja Remix muudavad SSR-i rakendamise Reactis suhteliselt lihtsaks. Nad pakuvad sisseehitatud tuge serveripoolseks renderdamiseks, marsruutimiseks ja andmete hankimiseks.
Näide Next.js-i kasutamisest:
Next.js tegeleb automaatselt SSR-iga `pages` kaustas olevate lehtede jaoks. Siin on lihtne näide:
// pages/index.js
function HomePage() {
return Tere tulemast minu veebisaidile!
;
}
export default HomePage;
Kui kasutaja kĂĽlastab avalehte, renderdab Next.js `HomePage` komponendi serveris ja saadab tulemuseks oleva HTML-i brauserile.
2. Staatilise saidi genereerimine (SSG)
Staatilise saidi genereerimine (SSG) on tehnika, mille puhul Reacti komponendid renderdatakse ehitamise ajal ja tulemuseks olevad HTML-failid serveeritakse otse kliendile. See on isegi kiirem kui SSR, kuna HTML on eelgenereeritud ja ei vaja igal päringul serveripoolset töötlemist.
- Äärmiselt kiired laadimisajad: HTML-failid serveeritakse otse CDN-ist, mis tagab ülikiired laadimisajad.
- Parem turvalisus: Puudub serveripoolne koodi käivitamine, mis vähendab rünnakupinda.
- Skaleeritavus: Lihtne skaleerida, kuna veebisait koosneb staatilistest failidest.
Raamistikud nagu Gatsby ja Next.js toetavad ka SSG-d. Need võimaldavad teil ehitamise ajal oma Reacti komponentidest staatilisi HTML-faile genereerida.
Näide Next.js-i kasutamisest:
SSG kasutamiseks Next.js-is saate kasutada `getStaticProps` funktsiooni andmete hankimiseks ja nende edastamiseks oma komponendile prop'idena.
// pages/blog/[id].js
export async function getStaticProps({ params }) {
const postId = params.id;
// Hangi postituse andmed API-st või andmebaasist
const post = { id: postId, title: `Postitus ${postId}`, content: `Postituse ${postId} sisu` };
return {
props: {
post,
},
};
}
export async function getStaticPaths() {
// Määrake parameetri `id` võimalikud väärtused
const paths = [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } },
];
return {
paths,
fallback: false, // Seadke tõeseks, kui soovite lehti genereerida nõudmisel
};
}
function BlogPost({ post }) {
return (
{post.title}
{post.content}
);
}
export default BlogPost;
Next.js genereerib ehitamise ajal iga postituse jaoks staatilised HTML-failid.
3. Sujuv tagasiminek `
Märgend `
Seda sisu kuvatakse, kui JavaScript on lubatud.
Märgendit `
4. Tingimuslik renderdamine
Tingimuslik renderdamine võimaldab teil renderdada erinevaid komponente või sisu sõltuvalt sellest, kas JavaScript on lubatud. Saate seda kasutada kasutajaliidese järkjärguliseks täiustamiseks JavaScripti funktsioonidega, pakkudes samal ajal põhikogemust ka ilma JavaScriptita.
import { useState, useEffect } from 'react';
function MyComponent() {
const [isJavaScriptEnabled, setIsJavaScriptEnabled] = useState(true);
useEffect(() => {
// Kontrolli, kas JavaScript on lubatud. See on lihtsustatud näide.
// Reaalses stsenaariumis võiksite kasutada robustsemat meetodit.
setIsJavaScriptEnabled(typeof window !== 'undefined');
}, []);
return (
{isJavaScriptEnabled ? (
Seda sisu renderdatakse JavaScriptiga.
) : (
Seda sisu renderdatakse ilma JavaScriptita.
)}
);
}
export default MyComponent;
See näide kasutab `useState` ja `useEffect` hook'e, et kontrollida, kas JavaScript on brauseris lubatud. Selle põhjal renderdab see erinevat sisu.
5. Semantilise HTML-i kasutamine
Semantiliste HTML-elementide kasutamine on ülioluline nii ligipääsetavuse kui ka progresseeruva täiustamise jaoks. Semantilised HTML-elemendid annavad sisule tähenduse ja struktuuri, muutes selle abitehnoloogiatele ja otsingumootorite robotitele lihtsamini mõistetavaks. Näiteks `
Artikli pealkiri
Artikli sisu läheb siia...
6. JavaScripti progresseeruv laadimine
Selle asemel, et laadida kogu JavaScript korraga, kaaluge selle järkjärgulist laadimist vastavalt vajadusele. See võib märkimisväärselt parandada lehe esmast laadimisaega. Saate kasutada tehnikaid nagu koodi tükeldamine ja laisk laadimine, et laadida JavaScripti ainult siis, kui see on vajalik.
Koodi tĂĽkeldamine:
Koodi tükeldamine võimaldab teil jagada oma JavaScripti koodi väiksemateks tükkideks, mida saab laadida iseseisvalt. See vähendab esialgse paketi suurust ja parandab esmast laadimisaega.
Laisk laadimine:
Laisk laadimine võimaldab teil laadida komponente või mooduleid ainult siis, kui neid vajatakse. See võib olla kasulik komponentide jaoks, mis ei ole lehel esialgu nähtavad, näiteks vahekaartidel või akordionites olevad komponendid.
7. CSS-i kasutamine põhilise interaktiivsuse jaoks
Enne kui tugineda JavaScriptile iga interaktiivse elemendi jaoks, uurige, mida saab saavutada CSS-iga. Lihtsaid interaktsioone nagu hõljumisefektid, fookuse olekud ja põhivormide valideerimine saab käsitleda CSS-iga, vähendades sõltuvust JavaScriptist. CSS-i pseudoklasse nagu `:hover`, `:focus` ja `:active` saab kasutada interaktiivsete elementide loomiseks ilma JavaScriptita.
.my-button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; } .my-button:hover { background-color: #3e8e41; }
Praktilised näited React'i progresseeruvast täiustamisest
Vaatame mõningaid praktilisi näiteid, kuidas rakendada progresseeruvat täiustamist Reactis:
Näide 1: Lihtne kontaktivorm
Kontaktivorm on paljudel veebisaitidel tavaline element. Siin on, kuidas saate rakendada kontaktivormi progresseeruva täiustamisega:
- HTML-vorm: Alustage põhilise HTML-vormiga, millel on vajalikud sisestusväljad ja esitamisnupp. Veenduge, et vormil oleks `action` ja `method` atribuut.
- Serveripoolne käsitlemine: Rakendage serveripoolne käsitlemine vormi esitamise töötlemiseks. See tagab, et vormi saab esitada ka ilma JavaScriptita.
- JavaScripti täiustus: Lisage JavaScript, et täiustada vormi funktsioonidega nagu kliendipoolne valideerimine, AJAX-esitamine ja reaalajas tagasiside.
HTML (põhivorm):
React (JavaScripti täiustus):
import React, { useState } from 'react';
function ContactForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [submissionStatus, setSubmissionStatus] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
try {
const response = await fetch('/submit-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name, email, message }),
});
if (response.ok) {
setSubmissionStatus('success');
setName('');
setEmail('');
setMessage('');
} else {
setSubmissionStatus('error');
}
} catch (error) {
setSubmissionStatus('error');
} finally {
setIsSubmitting(false);
}
};
return (
);
}
export default ContactForm;
Näide 2: Navigatsioonimenüü
Navigatsioonimenüü on veel üks levinud element, mida saab progresseeruva täiustamisega täiustada.
- HTML-menüü: Alustage põhilise HTML-i järjestamata loendiga (`
- `) koos linkidega (`
- `). See pakub põhilist menüüstruktuuri, mis töötab ilma JavaScriptita.
- CSS-stiilid: Kasutage CSS-i menĂĽĂĽ kujundamiseks ja visuaalselt atraktiivseks muutmiseks.
- JavaScripti täiustus: Lisage JavaScript menüü täiustamiseks funktsioonidega nagu rippmenüüd, mobiilimenüü lülitid ja sujuv kerimine.
HTML (põhimenüü):
React (JavaScripti täiustus - mobiilimenüü):
import React, { useState } from 'react';
function Navigation() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
return (
);
}
export default Navigation;
CSS (mobiilimenĂĽĂĽ stiilid):
nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
margin-right: 20px;
}
/* Mobiili stiilid */
@media (max-width: 768px) {
nav ul {
display: none; /* Peida menĂĽĂĽ vaikimisi mobiilis */
flex-direction: column;
}
nav ul.open {
display: flex; /* Kuva menĂĽĂĽ, kui lisatakse 'open' klass */
}
}
Globaalsed kaalutlused ligipääsetavuse osas
Progresseeruva täiustamise rakendamisel on ülioluline arvestada globaalsete ligipääsetavuse standarditega, nagu WCAG (Veebisisu juurdepääsetavuse suunised). Need suunised pakuvad raamistikku veebisisu muutmiseks puuetega inimestele ligipääsetavamaks. Mõned olulised kaalutlused hõlmavad:
- Klaviatuuriga navigeerimine: Veenduge, et kõikidele interaktiivsetele elementidele pääseb juurde ja neid saab kasutada klaviatuuriga.
- Ekraanilugeja ühilduvus: Kasutage semantilist HTML-i ja ARIA atribuute, et pakkuda ekraanilugejatele tähendusrikast teavet.
- Värvikontrast: Veenduge, et teksti ja taustavärvide vahel oleks piisav värvikontrast.
- Fondi suurus: Lubage kasutajatel fondi suurust vastavalt oma eelistustele kohandada.
React'i progresseeruva täiustamise eelised
Progresseeruva täiustamise rakendamine Reactis pakub mitmeid eeliseid:
- Parem ligipääsetavus: Muudab teie veebisaidi kättesaadavaks laiemale publikule, sealhulgas puuetega kasutajatele.
- Täiustatud jõudlus: Vähendab esmaseid laadimisaegu ja parandab üldist kasutajakogemust.
- Parem SEO: Parandab otsingumootorite järjestust, muutes teie sisu kergemini roomatavaks ja indekseeritavaks.
- Suurem vastupidavus: Tagab, et teie veebisait on kasutatav ka siis, kui JavaScript ebaõnnestub või pole saadaval.
- Tulevikukindlus: Valmistab teie veebisaidi ette tulevasteks tehnoloogiateks ja seadmeteks.
Tööriistad ja teegid progresseeruvaks täiustamiseks
Mitmed tööriistad ja teegid võivad teid aidata progresseeruva täiustamise rakendamisel Reactis:
- Next.js: Raamistik serveris renderdatud ja staatiliselt genereeritud Reacti rakenduste ehitamiseks.
- Gatsby: Raamistik staatiliste saitide ehitamiseks Reactiga.
- Remix: Täislahendusega veebiraamistik, mis toetab veebistandardeid ja progresseeruvat täiustamist.
- React Helmet: Teek dokumendi päisesiltide haldamiseks Reacti komponentides.
- Lighthouse: Avatud lähtekoodiga tööriist veebisaidi jõudluse, ligipääsetavuse ja SEO auditeerimiseks.
Kokkuvõte
React'i progresseeruv täiustamine on võimas strateegia ligipääsetavate, jõudluspõhiste ja vastupidavate veebisaitide loomiseks. Seades esikohale põhifunktsionaalsuse ja sisu kättesaadavuse, saate tagada, et teie veebisait on kasutatav kõigile, olenemata nende brauseri võimekusest või JavaScripti olemasolust. Rakendades tehnikaid nagu serveripoolne renderdamine, staatilise saidi genereerimine ja sujuv tagasiminek, saate luua Reacti rakendusi, mis pakuvad suurepärast kasutajakogemust ja on hästi positsioneeritud edu saavutamiseks pidevalt arenevas veebimaastikul. Pidage meeles, et ligipääsetavale disainile ja tugevale HTML-i vundamendile keskendumine pakub baaskogemust, mida JavaScript seejärel interaktiivsusega täiustab. See lähenemine mitte ainult ei laienda teie sihtrühma, vaid parandab ka teie veebisaidi üldist jõudlust ja SEO-d. Niisiis, võtke omaks progresseeruv täiustamine ja looge paremaid veebikogemusi kõigile üle maailma.